import React from "react";
import './index.scss';
import {Timeline, Grid, Radio, Modal} from '@arco-design/web-react';
import Main from "../../components/Layoute/Main";

const TimelineItem = Timeline.Item;
const {Row} = Grid;

/* 定义一个泛型 */
// interface T {
//     [name: string]: any;
// }

/* 组件的入参 */
interface OwnProps {
    // 国际化
    intl?: Function;
}

type Props = OwnProps;

const imageStyle = {
    margin: '0 12px 12px 12px'
}

const wheelPng = require("../../../src/assets/tour-bus.png");
const roadPng1 = require("../../assets/on_road_1.jpeg");
const fansPng = require("../../assets/fans.png");

const Home = (props: Props) => {
    const [mode, setMode] = React.useState<any>('alternate');
    const [visible, setVisible] = React.useState(false);

    /**
     * 点击事件
     */
    const handleClick = () => {
        setVisible(true)
    }

    return (
        <div className='home-box'>
            <Row className='home-btn-box' align='center' style={{marginBottom: 24}}>
                {/*<Typography.Text>GO</Typography.Text>*/}
                <div className='icon-tour-bus'>
                    <img src={wheelPng} alt=""/>
                    &nbsp; &nbsp;
                </div>
                <Radio.Group
                    value={mode}
                    type='button'
                    onChange={setMode}
                    options={[
                        {
                            label: '左侧车道',
                            value: 'left',
                        },
                        {
                            label: '中间车道',
                            value: 'alternate',
                        },
                        {
                            label: '右侧车道',
                            value: 'right',
                        },
                    ]}
                />
            </Row>
            <Timeline mode={mode} labelPosition='same'>
                <TimelineItem label='2022.5.20 19:59:59'
                              dot={<img src={fansPng} alt=""/>}
                              className="home-content-box">
                    <Row style={{display: 'inline-flex', alignItems: 'center'}}
                         onClick={handleClick}>
                        <img src={roadPng1}/>
                        <div className="content-item">
                            请您欣赏生日快乐歌
                        </div>
                    </Row>
                </TimelineItem>
                <TimelineItem label='2017-05'>
                    <Row style={{display: 'inline-flex', alignItems: 'center'}}>
                        <img
                            width='40'
                            style={imageStyle}
                            src='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/385ed540c359ec8a9b9ce2b5fe89b098.png~tplv-uwbnlip3yd-png.png'
                        />
                        <div style={{marginBottom: 12}}>
                            Xigua Video
                            <div style={{fontSize: 12, color: '#4E5969'}}>Founded in 2017</div>
                        </div>
                    </Row>
                </TimelineItem>
                <TimelineItem label='2018-07'>
                    <Row style={{display: 'inline-flex', alignItems: 'center'}}>
                        <img
                            width='40'
                            style={imageStyle}
                            src='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/73a34d47f2885cf5182d755aa0c8a7d4.png~tplv-uwbnlip3yd-png.png'
                        />
                        <div style={{marginBottom: 12}}>
                            Pipidance
                            <div
                                style={{
                                    fontSize: 12,
                                    color: '#4E5969',
                                }}
                            >
                                Founded in 2018
                            </div>
                        </div>
                    </Row>
                </TimelineItem>
            </Timeline>
            <Modal
                className="modal-box"
                title='生日快乐歌'
                visible={visible}
                onOk={() => setVisible(false)}
                onCancel={() => setVisible(false)}
                autoFocus={false}
                focusLock={true}
                footer={null}
            >
                <Main/>
            </Modal>
        </div>
    )
}

export default Home;
